<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../vue.js"></script>
    </head>

    <body>
        <div id="app">
            <App></App>
        </div>
        <script>
            Vue.config.productionTip = false;

            const App = Vue.extend({
                template: `
                    <div>
                        <h1>App组件{{count}}</h1>
                        <button @click='changCount'>按键</button>
                    </div>
            `,
                data() {
                    return {
                        count: 0,
                    };
                },
                methods: {
                    changCount() {
                        this.count += 1;
                    },
                },
            });

            const vm = new Vue({
                el: "#app",
                data() {
                    return {};
                },
                components: {
                    App,
                },
            });
            /*
            1.Vue组件实例是在挂载使用时由VueComponent构造函数创建
            2.VueComponent构造函数继承于Vue构造函数，继承关系在创建VueComponent构造函数确立
            3.每个Vue组件实例的VueComponent构造函数是不同的
            4.如果需要每个组件都能使用的属性，name需要在Vue构造函数的原型上扩展
            原型链：组件实例对象 ===> 组件的VueComponent原型 ===> Vue的原型 ===> Object的原型 ===> null
            */
        </script>
    </body>
</html>
